<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频合成</title>
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/chivoxsdk.css">
    <link rel="stylesheet" href="assets/css/chivox-example.css">
    <style>
        body {
            text-align: center;
        }

        #container {
            background: #eee;
            width: 800px;
            height: 600px;
            margin: 0 auto;
            text-align: left;
        }

        #containerInner {
            position: relative;
            padding: 20px;
        }

        .content .refText {
            /*resize: none;*/
            width: 676px;
            height: 120px;
        }

        .chivoxpanel input,.chivoxpanel select{
            width: 274px;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <p class="navbar-text">CHIVOX API JSSDK</p>
                <ul class="nav nav-pills">
                    <li><a href="index.html">首页</a></li>
                    <li><hr/></li>
                    <li ><a href="index.html">基础应用场景</a></li>
                    <li><hr/></li>
                      <li class="active"><a href="player_tts.html">音频合成</a></li>
                     <li><hr/></li>
                    <li><a target="_blank" href="../doc/index.html">SDK接口文档</a></li>
                </ul>
            </div>
            <div class="content">
                <div class="chivoxpanel">
                    <div class="list">
                        <img class="icon" src="assets/img/eval.png"></img>
                        <p class="title">基础应用场景</p>
                        <ul>

                            <li><a href="index.html">英文句子评测</a></li>
                            <li class="active"><a href="player_tts.html">音频合成</a></li>
                            <li><a href="aiPanel.html">aiPanel</a></li>
                            <li> <a href="en_pred_exam.html">en_pred_exam</a></li>
                        </ul>
                    </div>
                    <div class="mainarea">
                        <div id="aiPlayer">
                        </div>
                        <h1>使用Html5Player搭建中英文合成应用</h1>
                        <dl>
                            <dt>
                                合成文本：
                            </dt>
                            <dd>
                                <textarea class="refText">Hello, world!</textarea>
                            </dd>
                            <dt>
                                内核类型：
                            </dt>
                            <dd>
                                <select class="coretype">
                                    <option selected="selected" value="en.syn.sent">英文(默认)</option>
                                    <option value="cn.syn.sent">中文</option>
                                </select>
                            </dd>
                            <dt>
                                内核资源：只有对应语言的下拉列表有效
                            </dt>
                            <dd>
                                <select class="resource-en">
                                    <option selected="selected" value="syn.ensnt.wysbrf">syn.ensnt.wysbrf(英文)(默认)</option>
                                    <option value="syn.ensnt.acawbm">syn.ensnt.acawbm(英文)</option>
                                    <option value="syn.ensnt.shirlf">syn.ensnt.shirlf(英文)</option>
                                    <option value="syn.ensnt.liuyim">syn.ensnt.liuyim(英文)</option>
                                </select>
                                <select class="resource-cn">
                                    <option selected="selected" value="voices_anonyf_female.0.2.7">voices_anonyf_female.0.2.7(中文)(默认)</option>
                                    <option value="voices_bcgirl_female.0.2.7">voices_bcgirl_female.0.2.7(中文)</option>
                                    <option value="voices_xyshenf_female.0.2.7">voices_xyshenf_female.0.2.7(中文)</option>
                                    <option value="voices_zhilingf_female.0.2.8">voices_zhilingf_female.0.2.8(中文)</option>
                                </select>
                            </dd>
                        </dl>
                        <p>
                            <button id="startTTS">
                                开始合成下载
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
<!--<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../chivox.min.js"></script>
<script>
    $(function(){
        var player = new Html5Player({});

        $("#startTTS").click(function(){
            $.getJSON("../php/sig.php", function(json) {
                player.tts({
                    uid: 'chivox_tts_tester_001',
                    appkey: "14255202120000cf",
                    timestamp: json["timestamp"],
                    sig: json["sig"],
                    text: $(".refText").val(),
                    coreType: $(".coretype").val(),
                    resource: ($(".coretype").val() == "en.syn.sent") ? $(".resource-en").val() : $(".resource-cn").val()
                });
            });
        });
    });
</script>
</body>
</html>